<template>
  <div class="h-full">
    <n-card title="旺旺配置" :bordered="false" class="h-full rounded-8px shadow-sm">
    <n-space class="pb-12px" justify="space-between">
        <n-space>
          <n-input-group>
            <n-input-group-label>姓名：</n-input-group-label>
            <n-select v-model:value="productValue" filterable :options="productOption" :style="{ width: '120px' }" />
          </n-input-group>

          <n-input-group>
            <n-input-group-label>店铺：</n-input-group-label>
            <n-select v-model:value="sizeValue" filterable :options="sizeOption" :style="{ width: '120px' }" />
          </n-input-group>

          <n-input-group>
            <n-input-group-label>旺旺：</n-input-group-label>
            <n-input ></n-input>
          </n-input-group>

          <n-button type="primary" ghost>查询</n-button>
          <n-button type="primary" ghost>店铺配置</n-button>
        </n-space>
        
      </n-space>

      <n-data-table :columns="columns" :data="data"  class="flex-1-hidden py-12px" />
    </n-card>
  </div>
</template>

<script setup lang="tsx">
import { h, reactive, ref } from 'vue';
import type { PaginationProps } from 'naive-ui';
import { NSpace, NButton, NPopconfirm, NInputNumber } from 'naive-ui';
// import { useLoading } from '@/hooks';

// const { loading, startLoading, endLoading } = useLoading(false);
const createData = () => [

];
const data = ref(createData());
const pagination: PaginationProps = reactive({
  page: 1,
  pageSize: 10,
  showSizePicker: true,
  pageSizes: [10, 15, 20, 25, 30],
  onChange: (page: number) => {
    pagination.page = page;
  },
  onUpdatePageSize: (pageSize: number) => {
    pagination.pageSize = pageSize;
    pagination.page = 1;
  }
});
const columns = ref([
  {
    key: 'product',
    title: '设计师名称',
    align: 'center'
  },
  {
    key: 'size',
    title: '店铺名称',
    align: 'center'
  },
  {
    key: 'type',
    title: '旺旺号',
    align: 'center'
  }
]);

const productValue = ref('全部');
const productOption = [
  {
    label: '全部',
    value: 1
  }
];

const sizeValue = ref('全部');
const sizeOption = [
  {
    label: '全部',
    value: 1
  },
  {
    label: '益好旗舰店',
    value: 2
  },
  {
    label: '时间轴旗舰店',
    value: 3
  },
  {
    label: '妙语橙C店',
    value: 4
  },
  {
    label: '妙语橙旗舰店',
    value: 4
  },
  {
    label: '益好妙语橙专卖店',
    value: 6
  },
  {
    label: '盈喜客旗舰店',
    value: 7
  },
  {
    label: '集川旗舰店',
    value: 8
  },
  {
    label: '世纪开元旗舰店',
    value: 9
  },
  {
    label: '盒小盒创意工厂',
    value: 10
  }
];

</script>

<style scoped></style>
